<template>
	<el-card shadow="hover" class="item-background" style="margin: 0px; padding: 0px;">
		<div class="time">
			<h2>{{ time }}</h2>
			<p>{{ day }} {{ week }}</p>
		</div>
	</el-card>
</template>

<script>
	export default {
		title: "时钟",
		icon: "el-icon-clock",
		data() {
			return {
				timer: "", //定义一个定时器
				time: '',
				day: '',
				week: ''
			}
		},
		mounted() {
			this.showTime()
			this.timer = setInterval(() => {
				this.showTime()
			},1000)
		},
		methods: {
			showTime(){

				let week = new Date().getDay();
				let weekArr = [
					"星期日",
					"星期一",
					"星期二",
					"星期三",
					"星期四",
					"星期五",
					"星期六",
				];

				this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
				this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
				this.week = weekArr[week]
			}
		},
		beforeUnmount() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style scoped>
	.item-background {background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
	.time h2 {font-size: 40px;}
	.time p {font-size: 14px;margin-top: 13px;opacity: 0.7;}
</style>
